<template>
  <div class="about">
    <StoreTableComp :store="storeTableModel" :dataLabel="dataLabel">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <TabelEditorColumnComp prop="objectName" label="项目名称" width="180" align="center" :targetComp="TableCompDialog"></TabelEditorColumnComp>
      <TabelEditorColumnComp prop="objectDate" label="项目日期" width="180" align="center"></TabelEditorColumnComp>
      <TabelEditorColumnComp prop="startTime" label="开始时间" width="180" align="center"></TabelEditorColumnComp>
      <TabelEditorColumnComp prop="endTime" label="结束时间" width="180" align="center"></TabelEditorColumnComp>
      <TabelEditorColumnComp prop="leadersName" label="项目负责人" width="180" align="center"></TabelEditorColumnComp>
      <TabelEditorColumnComp prop="personName" label="项目参与人" width="180" align="center"></TabelEditorColumnComp>
      <TabelEditorColumnComp prop="moneny" label="项目金额" width="180" align="center"></TabelEditorColumnComp>
      <el-table-column prop="need" label="项目需求" >
        <template #default="scope">
          <StoreSelectCompM v-model="scope.row.need" :store="storeTableSelect" :signData="{id: 'id', value: 'name', label: 'label'}"></StoreSelectCompM>
        </template>
      </el-table-column>
      <TableActionColumnComp label="操作" width="180">
        <template>
          <TableEditorButton></TableEditorButton>
          <TableDeleteButton></TableDeleteButton>
        </template>
      </TableActionColumnComp>
    </StoreTableComp>
    
    <!-- <DTable :store="storeTableModel" :columns="columnsOne"></DTable> -->

    <!-- <StoreTableComp :store="storeTableModel" :dataLabel="dataLabel">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <SyncDialogComp prop="objectName" label="项目名称" width="180" align="center" :targetComp="TableCompDialog"></SyncDialogComp>
      <SyncDialogComp prop="objectDate" label="项目日期" width="180" align="center"></SyncDialogComp>
      <SyncDialogComp prop="startTime" label="开始时间" width="180" align="center"></SyncDialogComp>
      <SyncDialogComp prop="endTime" label="结束时间" width="180" align="center"></SyncDialogComp>
      <SyncDialogComp prop="leadersName" label="项目负责人" width="180" align="center"></SyncDialogComp>
      <SyncDialogComp prop="personName" label="项目参与人" width="180" align="center"></SyncDialogComp>
      <SyncDialogComp prop="moneny" label="项目金额" width="180" align="center"></SyncDialogComp>
      <el-table-column prop="need" label="项目需求" >
        <template #default="scope">
          <StoreSelectCompM v-model="scope.row.need" :store="storeTableSelect" :signData="{id: 'id', value: 'name', label: 'label'}"></StoreSelectCompM>
        </template>
      </el-table-column>
      <TableActionColumnComp label="操作" width="180">
        <template>
          <TableEditorButton></TableEditorButton>
          <TableDeleteButton></TableDeleteButton>
        </template>
      </TableActionColumnComp>
    </StoreTableComp> -->
    
  </div>
</template>
<script>
/*
  要点是远程获取的columns 如何转换为本地的columns(序列化/反序列化) 也就是说描述甚至可以不是具体的组件 只是一段描述
*/ 
import ProvideComp from '@/components/ProvideComp.vue'
import StoreTableComp from '@/components/Table/StoreTableComp.vue'
import TabelEditorColumnComp from '@/components/Table/column/TabelEditorColumnComp.vue'
import TableCompDialog from './TableComp/TableCompDialog.vue'
import TableDeleteButton from '@/components/Table/button/TableDeleteButton.vue'
import TableActionColumnComp from '@/components/Table/column/TableActionColumnComp.vue'
import TableEditorButton from '@/components/Table/button/TableEditorButton.vue'
import StoreSelectCompM from '@/components/Select/StoreSelectCompM.vue'

import SyncDialogComp from './SyncDialogComp.vue'

import { StoreTable } from '@/model/table/StoreTableModel'
import { StoreTableSelect } from '@/model/table/StoreTableSelect'
 
import DTable from './DTable.vue'
// 远程本地映射函数
function parseColumn(columns){
  return columns.map(column=>{
    column.type = componentMapper[column.type] || column.type

    // 合并:attrs 与 attrs
    if(column[':attrs']){
      column.attrs = column.attr || {}
      for(let key in column[':attrs']){
        const attr = column[':attrs'][key]
        column.attrs[key] = componentMapper[attr] || attr
      }
      column.type = componentMapper[column.type] || column.type
    }

    if(column.children){
      column.children = parseColumn(column.children)
    }

    return column
  })
}

// 远程本地映射组
const componentMapper = {
  TabelEditorColumnComp,
  TableCompDialog,
  TableDeleteButton,
  TableActionColumnComp,
  TableEditorButton
}

function addStatus(columns){
  columns.forEach(item => {
    item['isShow'] = true   
  })
  return columns
}

export default {
  name: 'Table',
  components: {
    ProvideComp,
    StoreTableComp,
    TabelEditorColumnComp,
    TableDeleteButton,
    TableActionColumnComp,
    TableEditorButton,
    DTable,
    StoreSelectCompM,
    SyncDialogComp
  },
  beforeCreate(){
    this.storeTableModel = new StoreTable()
    this.TableCompDialog = TableCompDialog
    this.storeTableSelect = new StoreTableSelect()
  },
  data(){
    return {
      columns: [
        {
          type: 'el-table-column',
          attrs: {
            type:"selection", 
            width:"55",
            align:"center"
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectName",
            label: "项目名称",
            width: "180",
            align: "center",
            targetComp: TableCompDialog
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectDate",
            label: "项目日期",
            width: "180",
            align: "center"
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectDate",
            label: "开始时间",
            width: "180",
            align: "center"
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectDate",
            label: "结束时间",
            width: "180",
            align: "center"
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectDate",
            label: "项目负责人",
            width: "180",
            align: "center"
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectDate",
            label: "项目参与人",
            width: "180",
            align: "center"
          },
          
        },
        {
          type: TabelEditorColumnComp,
          attrs: {
            prop: "objectDate",
            label: "项目金额",
            width: "180",
            align: "center"
          },
          
        },
        {
          type: TableActionColumnComp,
          attrs: {
            label: "操作",
            width: "180",
          },
          children: [
            {
              type: TableEditorButton
            }
          ],
          
        }
      ],
      columns1: [
        {
          type: 'el-table-column',
          attrs: {
            type:"selection", 
            width:"55",
            align:"center"
          },
          isShow: false
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectName",
            label: "项目名称",
            width: "180",
            align: "center",
            targetComp: TableCompDialog
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectDate",
            label: "项目日期",
            width: "180",
            align: "center"
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectDate",
            label: "开始时间",
            width: "180",
            align: "center"
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectDate",
            label: "结束时间",
            width: "180",
            align: "center"
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectDate",
            label: "项目负责人",
            width: "180",
            align: "center"
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectDate",
            label: "项目参与人",
            width: "180",
            align: "center"
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            prop: "objectDate",
            label: "项目金额",
            width: "180",
            align: "center"
          },
          isShow: true
        },
        {
          type: SyncDialogComp,
          attrs: {
            label: "操作",
            width: "180",
          },
          children: [
            {
              type: TableEditorButton
            }
          ],
          isShow: true
        }
      ],
      dataColumns: [
        {
          type: 'el-table-column',
          attrs: {
            type:"selection", 
            width:"55",
            align:"center",
          }
        },
        {
          type: "TabelEditorColumnComp",
          ':attrs': {
            targetComp: "TableCompDialog"
          },
          attrs: {
            prop: "objectName",
            label: "项目名称",
            width: "180",
            align: "center",
            
          }
        },
        {
          type: "TabelEditorColumnComp",
          attrs: {
            prop: "objectDate",
            label: "项目日期",
            width: "180",
            align: "center"
          }
        },
        {
          type: "TabelEditorColumnComp",
          attrs: {
            prop: "objectDate",
            label: "开始时间",
            width: "180",
            align: "center"
          }
        },
        {
          type: "TabelEditorColumnComp",
          attrs: {
            prop: "objectDate",
            label: "结束时间",
            width: "180",
            align: "center"
          }
        },
        {
          type: "TabelEditorColumnComp",
          attrs: {
            prop: "objectDate",
            label: "项目负责人",
            width: "180",
            align: "center"
          }
        },
        {
          type: "TabelEditorColumnComp",
          attrs: {
            prop: "objectDate",
            label: "项目参与人",
            width: "180",
            align: "center"
          }
        },
        {
          type: "TabelEditorColumnComp",
          attrs: {
            prop: "objectDate",
            label: "项目金额",
            width: "180",
            align: "center"
          }
        },
        {
          type: "TableActionColumnComp",
          attrs: {
            label: "操作",
            width: "180",
          },
          children: [
            {
              type: "TableEditorButton"
            }
          ]
        }
      ],
      dataLabel: [
        '项目名称',
        '项目日期',
        '开始时间',
        '结束时间',
        '项目负责人',
        '项目参与人',
        '项目金额',
        '操作' 
      ]
    }
  },
  methods: {
    goto(){
      console.log(123);
      
      this.$router.push('/test')
    }
  },
  computed: {
    computedColumns(){
      return addStatus(this.columns)
    },
    columnsOne(){
      return this.columns1
    }
  }
}
</script>

